<template>
  <div class="bg-white dark:bg-gray-900">
    <div class="flex justify-center h-screen">
      <div class="hidden bg-cover lg:block lg:w-2/3"
           :style="'background-image: url('+loginImg+')'">
        <div class="flex items-center h-full px-20 bg-gray-900 bg-opacity-40">
          <div>
            <h2 class="text-4xl font-bold text-white">{{ title }}</h2>

            <p class="max-w-xl mt-3 text-gray-300">
              我是一个任性的孩子，我想擦去一切不幸。我想在大地上，画满窗子。让所有习惯黑暗的眼睛，都习惯光明。
            </p>
          </div>
        </div>
      </div>

      <div class="flex items-center w-full max-w-md px-6 mx-auto lg:w-2/6">
        <div class="flex-1">
          <div class="text-center">
            <h2 class="text-4xl font-bold text-center text-gray-700 dark:text-white">{{ title }}</h2>

            <p class="mt-3 text-gray-500 dark:text-gray-300">Think different</p>
          </div>

          <div class="mt-8">
            <form>
              <div>
                <label for="username" class="block mb-2 text-sm text-gray-600 dark:text-gray-200">用户名</label>
                <input v-model="form.username" type="text" name="username" id="username" placeholder="填写你的用户名"
                       class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40"/>
              </div>

              <div class="mt-6">
                <label for="email" class="block mb-2 text-sm text-gray-600 dark:text-gray-200">邮箱</label>
                <input v-model="form.email" type="email" name="email" id="email" placeholder="填写你的邮箱"
                       class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40"/>
              </div>

              <div class="mt-6">
                <div class="flex justify-between mb-2">
                  <label for="password" class="text-sm text-gray-600 dark:text-gray-200">密码</label>
                </div>

                <input v-model="form.password" type="password" name="password" id="password" placeholder="填写你的密码"
                       class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40"/>
              </div>

              <div class="mt-6">
                <div class="flex justify-between mb-2">
                  <label for="con_password" class="text-sm text-gray-600 dark:text-gray-200">确认密码</label>
                </div>

                <input v-model="form.con_password" type="password" name="con_password" id="con_password"
                       placeholder="再次写你的密码"
                       class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40"/>
              </div>

              <div class="mt-6">
                <button @click.prevent="reg"
                        class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400 focus:ring focus:ring-blue-300 focus:ring-opacity-50">
                  注册
                </button>
              </div>
              <div class="mt-6">
                <button @click.prevent="$router.push({name:'Index'})"
                        class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-red-500 rounded-md hover:bg-red-400 focus:outline-none focus:bg-red-400 focus:ring focus:ring-red-300 focus:ring-opacity-50">
                  返回首页
                </button>
              </div>

            </form>

            <p class="mt-6 text-sm text-center text-gray-400">已经有账号了？
              <a @click.prevent="$router.push({name: 'Login'})" href="#"
                 class="text-blue-500 focus:outline-none focus:underline hover:underline">
                登陆
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import loginImg from '@/assets/img/login.jpg'
import {mapState} from 'vuex'
import {ElMessage} from 'element-plus'
import request from '@/http/request'

export default {
  name: 'Reg',
  computed: {
    ...mapState(['title'])
  },
  data() {
    return {
      loginImg: loginImg,
      form: {
        username: '',
        email: '',
        password: '',
        con_password: ''
      }
    }
  },

  methods: {
    reg() {
      request.reg(this.form.username, this.form.password, this.form.con_password, this.form.email).then(res => {
        if (res.data.status === 200) {
          ElMessage.success(res.data.message)
        } else {
          ElMessage.error(res.data.message)
        }
      })
    }
  },
}
</script>

<style scoped>

</style>